<!-- 1. 逻辑代码 写函数 定义数据-->

<script setup lang="ts">
import { ref } from 'vue'
const pet = ref(['蟑螂', '老鼠', '毒蛇', '蜥蜴', '泥鳅', '蜘蛛'])
const person = {
  name: 'jack',
  age: 18,
  friend: 'rose',
  food: '猪脚饭',
}
</script>
<!-- 2. 结构 -->
<template>
  <ul>
    <!-- 1. 基于数组循环渲染 -->
    <!-- <li v-for="(item, index) in pet" key="index">{{ item }} -- {{ index + 1 }}</li> -->
    <!-- 2. 基于对象渲染 -->
    <!-- 第一项是值， 第二项是键 -->
    <!-- <li v-for="(item, key) in person" :key = item>{{ key }} : {{ item }}</li> -->
    <!-- 3. 基于数字，生成列表， 开发初期， 填充界面 -->
    <li v-for="item in 5" key="item"><a href="#">🐔🐱🦆</a> <button>我是按钮</button></li>
  </ul>
</template>
<!-- 3. 样式 -->
<style scoped></style>
